<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<title>移动Web页面布局实践</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<header>
		<a href="###">&lt;返回</a>
		<h1>这是标题</h1>
	</header>
	<nav>
		<ul>
			<li><a href="###">导航</a></li>
			<li class="active"><a href="###">导航</a></li>
			<li><a href="###">导航</a></li>
			<li><a href="###">导航</a></li>
			<li><a href="###">导航</a></li>
		</ul>
	</nav>
	<div class="pic"><img src="img/title.png" alt="小熊"></div>
	<ul class="label">
		<li>
			<figure>
				<img src="img/label.png" alt="">
				<h2>标签</h2>
			</figure>
		</li>
		<li>
			<figure>
				<img src="img/label.png" alt="">
				<h2>标签</h2>
			</figure>
		</li>
		<li>
			<figure>
				<img src="img/label.png" alt="">
				<h2>标签</h2>
			</figure>
		</li>
		<li>
			<figure>
				<img src="img/label.png" alt="">
				<h2>标签</h2>
			</figure>
		</li>
		<li>
			<figure>
				<img src="img/label.png" alt="">
				<h2>标签</h2>
			</figure>
		</li>
	</ul>
	<div class="columns">
			<div class="wrap">
				<div class="col-1">
					<img src="img/xiaoxiong1.gif" alt="">
					<h2>分栏一</h2>
					<h3>分栏小标题</h3>
				</div>
				<div class="col-2">
					<img src="img/xiaoxiong2.gif" alt="">
					<h2>分栏二</h2>
					<h3>分栏小标题</h3>
				</div>
				<div class="col-3">
					<img src="img/xiaoxiong3.gif" alt="">
					<hgroup>

						<h2>分栏三</h2>
						<h3>分栏小标题</h3>
					</hgroup>
				</div>
			</div>
	</div>
	<section>
		<h2>模块1</h2>
		<div>
			<div class="pic"><img src="img/xiaoxiong.gif" alt=""><img src="img/xiaoxiong.gif" alt=""></div>
			<div class="list">
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
			</div>
		</div>
	</section>
	<section>
		<h2>模块2</h2>
		<div>
			<div class="pic"><img src="img/xiaoxiong.gif" alt=""><img src="img/xiaoxiong.gif" alt=""></div>
			<div class="list">
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
				<div>这是文档</div>
			</div>
		</div>
	</section>
	<section class="section">
		<div class="portrait">
			<figure>
				<div><img src="img/title.png" alt=""></div>
				<figcaption>
					<h2>这是文章标题</h2>
					<p>文章来源 6分钟前</p>
				</figcaption>
			</figure>
			<figure>
				<div><img src="img/title.png" alt=""></div>
				<figcaption>
					<h2>这是文章标题</h2>
					<p>文章来源 7分钟前</p>
				</figcaption>
			</figure>
		</div>
		<div class="transverse">
			<h2>这个也是标题</h2>
			<div>
				<div><img src="img/title.png" alt=""></div>
				<div><img src="img/title.png" alt=""></div>
				<div><img src="img/title.png" alt=""></div>
			</div>
			<p>文章来源 7分钟前</p>
		</div>
	</section>

</body>
</html>